.scroll-animate.animated {
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
  }
  
  .font-fadeIn font {
    display: inline-block;
  }
  
  .scrolly {
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    backface-visibility: hidden;
  }
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  /*animate补充动画*/
@keyframes fadeInLeftSmall {
    from {
      opacity: 0;
      transform: translate3d(-1rem, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .fadeInLeftSmall {
    animation-name: fadeInLeftSmall;
  }
  
  @keyframes fadeInRightSmall {
    from {
      opacity: 0;
      transform: translate3d(0.3rem, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .fadeInRightSmall {
    animation-name: fadeInRightSmall;
  }
  
  @keyframes fadeInDownSmall {
    from {
      opacity: 0;
      transform: translate3d(0%, -10px, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  .fadeInDownSmall {
    animation-name: fadeInDownSmall;
  }
  
  @keyframes fadeOutDownSmall {
    from {
      opacity: 1;
      transform: none;
    }
  
    to {
      opacity: 0;
      transform: translate3d(0%, 10px, 0);
    }
  }
  
  .fadeOutDownSmall {
    animation-name: fadeOutDownSmall;
  }
  
  @keyframes fadeOutRightSmall {
    from {
      opacity: 1;
      transform: none;
    }
  
    to {
      opacity: 0;
      transform: translate3d(50px, 0px, 0);
    }
  }
  
  .fadeOutRightSmall {
    animation-name: fadeOutRightSmall;
  }
  
  @keyframes fadeInUpSmall {
    from {
      opacity: 0;
      transform: translate3d(0%, 80px, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  
  @media (max-width: 1024px) {
    @keyframes fadeInUpSmall {
      from {
        opacity: 0;
        transform: translate3d(0%, 30px, 0);
      }
  
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
  
  .fadeInUpSmall {
    animation-name: fadeInUpSmall;
  }
  
  @keyframes scaleIn {
    0% {
      opacity: 0;
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      backface-visibility: hidden;
    }
  
    100% {
      opacity: 1;
      transform: scale(1);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      backface-visibility: hidden;
    }
  }
  
  .scaleIn {
    animation-name: scaleIn;
  }
  
  .getGray {
    -webkit-filter: grayscale(100%);
    /* CSS3 filter方式，webkit内核方式，firefox外的绝大部分的现代浏览器*/
    -moz-filter: grayscale(100%);
    /* 目前没有实现 */
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    /* CSS3 filter方式，标准写法*/
    /*filter: url(filters.svg#grayscale);*/
    /* Firefox 4+ */
    filter: gray;
    /* IE 6-9 */
  }
  
  .img-ani {
    transform: scaleX(0.5) scaleY(0.5) scaleZ(1) translate(0, 50%);
    transition: all .9s ease;
    opacity: 0;
  }
  
  .img-ani .img-child {
    transform: scaleX(1.5) scaleY(1.5) scaleZ(1);
    transition: all 1.5s ease;
  }
  
  .img-ani.go {
    transform: scaleX(1) scaleY(1) scaleZ(1) translate(0);
    opacity: 1;
  }
  
  .img-ani.go .img-child {
    transform: scaleX(1) scaleY(1) scaleZ(1) translate(0);
  }
  
  .bx {
    background-size: cover;
    background-position: center;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .ph .pic {
    position: absolute;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    left: -30px;
    top: -30px;
    backface-visibility: hidden;
  }
  
  @media screen and (orientation: portrait) {
    .ph .pic {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      backface-visibility: hidden;
    }
  }
  
  @keyframes Tmouse {
    0% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }
  
    100% {
      -webkit-transform: translateY(12px);
      -moz-transform: translateY(-12px);
      -ms-transform: translateY(-12px);
      -o-transform: translateY(-12px);
      transform: translateY(-12px);
    }
  }
  
  @keyframes wave {
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes loop1 {
    0% {
      transform: rotate(0);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes loop2 {
    0% {
      transform: rotate(40deg);
    }
  
    100% {
      transform: rotate(400deg);
    }
  }
  
  @keyframes loop3 {
    0% {
      transform: rotate(80deg);
    }
  
    100% {
      transform: rotate(440deg);
    }
  }
  
  @keyframes loop4 {
    0% {
      transform: rotate(-30deg);
    }
  
    100% {
      transform: rotate(330deg);
    }
  }
  
  @keyframes fn3 {
    0% {
      opacity: 0;
      transform: matrix(1, 0.1, 0, 1, 0, 10);
    }
  
    100% {
      opacity: 1;
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }
  
  .fn3 {
    transform-origin: 0 50%;
    animation: fn3 1.2s cubic-bezier(0.49, 0.54, 0.16, 1);
    animation-fill-mode: both;
  }
  
  /* --------------------------------
  
  Keyframes
  
  -------------------------------- */
  @-webkit-keyframes cd-reveal-left {
    0% {
      opacity: 0;
      visibility: hidden;
    }
  
    100% {
      opacity: 1;
      visibility: visible;
    }
  }
  
  @keyframes cd-reveal-left {
    0% {
      opacity: 0;
      visibility: hidden;
    }
  
    100% {
      opacity: 1;
      visibility: visible;
    }
  }
  
  @-webkit-keyframes cd-reveal-right {
    0% {
      opacity: 0;
      visibility: hidden;
    }
  
    100% {
      opacity: 1;
      visibility: visible;
    }
  }
  
  @keyframes cd-reveal-right {
    0% {
      opacity: 0;
      visibility: hidden;
    }
  
    100% {
      opacity: 1;
      visibility: visible;
    }
  }
  
  @-webkit-keyframes cd-hide-left {
    0% {
      opacity: 1;
      visibility: visible;
    }
  
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  @keyframes cd-hide-left {
    0% {
      opacity: 1;
      visibility: visible;
    }
  
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  @-webkit-keyframes cd-hide-right {
    0% {
      opacity: 1;
      visibility: visible;
    }
  
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  @keyframes cd-hide-right {
    0% {
      opacity: 1;
      visibility: visible;
    }
  
    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  @-webkit-keyframes cd-clicked {
  
    0%,
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  
  @keyframes cd-clicked {
  
    0%,
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  
  @keyframes cir_right {
    from {
      clip-path: circle(12vw at 112% 50%);
    }
  
    to {
      clip-path: circle(12vw at 102% 50%);
    }
  }
  
  @keyframes cir_left {
    from {
      clip-path: circle(12vw at -12% 50%);
    }
  
    to {
      clip-path: circle(12vw at -2% 50%);
    }
  }
  
  @keyframes banner_in {
    0% {
      clip-path: ellipse(50% 50% at 50% 150%);
    }
  
    100% {
      clip-path: ellipse(100% 180% at 50% 150%);
    }
  }
  
  @keyframes banner_out {
    0% {
      clip-path: ellipse(100% 180% at 50% 150%);
    }
  
    100% {
      clip-path: ellipse(50% 50% at 50% 150%);
    }
  }
  
  @keyframes banner_appIn {
    0% {
      clip-path: ellipse(100% 50% at 50% 150%);
    }
  
    100% {
      clip-path: ellipse(180% 180% at 50% 150%);
    }
  }
  
  @keyframes banner_appOut {
    0% {
      clip-path: ellipse(180% 180% at 50% 150%);
    }
  
    100% {
      clip-path: ellipse(100% 50% at 50% 150%);
    }
  }
  
  @keyframes row5_in {
    0% {
      opacity: 1;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  @keyframes r5_in {
    0% {
      transform: translate3d(-70vw, 36vw, 0) scale(1);
    }
  
    50% {
      transform: translate3d(-14vw, 6vw, 0) scale(1);
    }
  
    100% {
      transform: translate3d(-14vw, 6vw, 0) scale(3);
    }
  }
  
  @keyframes r5_out {
    0% {
      transform: translate3d(-14vw, 6vw, 0) scale(3);
    }
  
    50% {
      transform: translate3d(-14vw, 6vw, 0) scale(1);
    }
  
    100% {
      transform: translate3d(-70vw, 36vw, 0) scale(1);
    }
  }
  
  @keyframes slider {
    0% {
      opacity: 0;
      margin-left: -0.1rem;
    }
  
    100% {
      opacity: 1;
      margin-left: 0;
    }
  }
  
  @keyframes scrFn {
    0% {
      transform: translate3d(50vw, 42vh, 0) scale(0.9) rotate(0);
    }
  
    30% {
      transform: translate3d(50vw, 42vh, 0) scale(9) rotate(0);
    }
  
    100% {
      transform: translate3d(50vw, 42vh, 0) scale(54) rotate(20deg);
    }
  }
  
  @keyframes aboutFn {
    0% {
      -webkit-mask-size: 45.8%;
      -webkit-mask-position: 50% 40%;
    }
  
    30% {
      -webkit-mask-size: 458%;
      -webkit-mask-position: 50% 40%;
    }
  
    100% {
      -webkit-mask-size: 2738%;
      -webkit-mask-position: 52% 52%;
    }
  }
  
  @keyframes scrImg {
    0% {
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      backface-visibility: hidden;
    }
  
    100% {
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      backface-visibility: hidden;
    }
  }
  
  @keyframes scrOut {
    0% {
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  
    12% {
      transform: translate3d(0, 20px, 0);
      -webkit-transform: translate3d(0, 20px, 0);
      -moz-transform: translate3d(0, 20px, 0);
      -o-transform: translate3d(0, 20px, 0);
      -ms-transform: translate3d(0, 20px, 0);
      backface-visibility: hidden;
      opacity: 0;
    }
  
    100% {
      transform: translate3d(0, 20px, 0);
      -webkit-transform: translate3d(0, 20px, 0);
      -moz-transform: translate3d(0, 20px, 0);
      -o-transform: translate3d(0, 20px, 0);
      -ms-transform: translate3d(0, 20px, 0);
      backface-visibility: hidden;
      opacity: 0;
    }
  }
  
  @keyframes scrP1 {
    0% {
      transform: translate3d(0, 0, 0) scale(1);
      -webkit-transform: translate3d(0, 0, 0) scale(1);
      -moz-transform: translate3d(0, 0, 0) scale(1);
      -o-transform: translate3d(0, 0, 0) scale(1);
      -ms-transform: translate3d(0, 0, 0) scale(1);
      backface-visibility: hidden;
      opacity: 1;
    }
  
    8% {
      transform: translate3d(-5px, -7px, 0) scale(1.05);
      -webkit-transform: translate3d(-5px, -7px, 0) scale(1.05);
      -moz-transform: translate3d(-5px, -7px, 0) scale(1.05);
      -o-transform: translate3d(-5px, -7px, 0) scale(1.05);
      -ms-transform: translate3d(-5px, -7px, 0) scale(1.05);
      backface-visibility: hidden;
      opacity: 0;
    }
  
    100% {
      transform: translate3d(-5px, -7px, 0) scale(1.05);
      -webkit-transform: translate3d(-5px, -7px, 0) scale(1.05);
      -moz-transform: translate3d(-5px, -7px, 0) scale(1.05);
      -o-transform: translate3d(-5px, -7px, 0) scale(1.05);
      -ms-transform: translate3d(-5px, -7px, 0) scale(1.05);
      backface-visibility: hidden;
      opacity: 0;
    }
  }
  
  @keyframes scrP2 {
    0% {
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  
    10% {
      transform: translate3d(7px, 5px, 0) scale(1.05);
      -webkit-transform: translate3d(7px, 5px, 0) scale(1.05);
      -moz-transform: translate3d(7px, 5px, 0) scale(1.05);
      -o-transform: translate3d(7px, 5px, 0) scale(1.05);
      -ms-transform: translate3d(7px, 5px, 0) scale(1.05);
      backface-visibility: hidden;
      opacity: 0;
    }
  
    100% {
      transform: translate3d(7px, 5px, 0) scale(1.05);
      -webkit-transform: translate3d(7px, 5px, 0) scale(1.05);
      -moz-transform: translate3d(7px, 5px, 0) scale(1.05);
      -o-transform: translate3d(7px, 5px, 0) scale(1.05);
      -ms-transform: translate3d(7px, 5px, 0) scale(1.05);
      backface-visibility: hidden;
      opacity: 0;
    }
  }
  
  @keyframes scrP3 {
    0% {
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  
    12% {
      transform: translate3d(-7px, -5px, 0) scale(1.05);
      -webkit-transform: translate3d(-7px, -5px, 0) scale(1.05);
      -moz-transform: translate3d(-7px, -5px, 0) scale(1.05);
      -o-transform: translate3d(-7px, -5px, 0) scale(1.05);
      -ms-transform: translate3d(-7px, -5px, 0) scale(1.05);
      backface-visibility: hidden;
      opacity: 0;
    }
  
    100% {
      transform: translate3d(-7px, -5px, 0) scale(1.05);
      -webkit-transform: translate3d(-7px, -5px, 0) scale(1.05);
      -moz-transform: translate3d(-7px, -5px, 0) scale(1.05);
      -o-transform: translate3d(-7px, -5px, 0) scale(1.05);
      -ms-transform: translate3d(-7px, -5px, 0) scale(1.05);
      backface-visibility: hidden;
      opacity: 0;
    }
  }
  
  .scrTxt {
    animation-name: scrTxt;
  }
  
  @keyframes scrTxt {
    0% {
      transform: translate3d(50px, 10px, 0);
      -webkit-transform: translate3d(50px, 10px, 0);
      -moz-transform: translate3d(50px, 10px, 0);
      -o-transform: translate3d(50px, 10px, 0);
      -ms-transform: translate3d(50px, 10px, 0);
      backface-visibility: hidden;
      opacity: 0;
    }
  
    20% {
      transform: translate3d(0px, 0px, 0);
      -webkit-transform: translate3d(0px, 0px, 0);
      -moz-transform: translate3d(0px, 0px, 0);
      -o-transform: translate3d(0px, 0px, 0);
      -ms-transform: translate3d(0px, 0px, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  
    100% {
      transform: translate3d(0px, 0px, 0);
      -webkit-transform: translate3d(0px, 0px, 0);
      -moz-transform: translate3d(0px, 0px, 0);
      -o-transform: translate3d(0px, 0px, 0);
      -ms-transform: translate3d(0px, 0px, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  }
  
  @keyframes scrP4 {
    0% {
      transform: translate3d(-120px, 0px, 0px) rotate(-50deg);
    }
  
    30% {
      transform: translate3d(-120px, 0px, 0px) rotate(0deg);
    }
  
    100% {
      transform: translate3d(-120px, 0px, 0px) rotate(0deg);
    }
  }
  
  @keyframes scrP5 {
    0% {
      transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
      -webkit-transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
      -moz-transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
      -o-transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
      -ms-transform: translate3d(calc(70vw - 30vw), calc(13vw + 12.3vw), 0);
      backface-visibility: hidden;
    }
  
    58% {
      transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      -webkit-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      -moz-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      -o-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      -ms-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      backface-visibility: hidden;
    }
  
    100% {
      transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      -webkit-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      -moz-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      -o-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      -ms-transform: translate3d(calc(50vw - 30vw), calc(13vw + 12.3vw), 0);
      backface-visibility: hidden;
    }
  }
  
  @keyframes scrP51 {
    0% {
      margin-left: 50%;
      letter-spacing: 0.6rem;
    }
  
    40% {
      margin-left: 0%;
      letter-spacing: 0px;
    }
  
    100% {
      margin-left: 0%;
      letter-spacing: 0px;
    }
  }
  
  @keyframes scrP6 {
    0% {
      transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -webkit-transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -moz-transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -o-transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -ms-transform: translate3d(calc(70vw - 6.25vw), calc(13vw + 12.3vw), 0);
      backface-visibility: hidden;
      letter-spacing: 1rem;
      opacity: 0;
    }
  
    58% {
      transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -webkit-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -moz-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -o-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -ms-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      backface-visibility: hidden;
      letter-spacing: 0px;
      opacity: 1;
    }
  
    100% {
      transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -webkit-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -moz-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -o-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      -ms-transform: translate3d(calc(50vw - 6.25vw), calc(13vw + 12.3vw), 0);
      backface-visibility: hidden;
      letter-spacing: 0px;
      opacity: 1;
    }
  }
  
  @keyframes scrP61 {
    0% {
      letter-spacing: 0.6rem;
      background-color: #ffffff;
    }
  
    40% {
      letter-spacing: 0px;
      background-color: rgba(255, 255, 255, 0);
    }
  
    100% {
      letter-spacing: 0px;
      background-color: rgba(255, 255, 255, 0);
    }
  }
  
  @keyframes scrP7 {
    0% {
      transform: translate3d(0vw, 0vw, 0);
      -webkit-transform: translate3d(0vw, 0vw, 0);
      -moz-transform: translate3d(0vw, 0vw, 0);
      -o-transform: translate3d(0vw, 0vw, 0);
      -ms-transform: translate3d(0vw, 0vw, 0);
      backface-visibility: hidden;
    }
  
    58% {
      transform: translate3d(-15vw, 0vw, 0);
      -webkit-transform: translate3d(-15vw, 0vw, 0);
      -moz-transform: translate3d(-15vw, 0vw, 0);
      -o-transform: translate3d(-15vw, 0vw, 0);
      -ms-transform: translate3d(-15vw, 0vw, 0);
      backface-visibility: hidden;
    }
  
    100% {
      transform: translate3d(-15vw, 0vw, 0);
      -webkit-transform: translate3d(-15vw, 0vw, 0);
      -moz-transform: translate3d(-15vw, 0vw, 0);
      -o-transform: translate3d(-15vw, 0vw, 0);
      -ms-transform: translate3d(-15vw, 0vw, 0);
      backface-visibility: hidden;
    }
  }
  
  @keyframes scrP8 {
    0% {
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      backface-visibility: hidden;
    }
  
    100% {
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      backface-visibility: hidden;
    }
  }
  
  @keyframes scrP9 {
    0% {
      transform: translate3d(0vw, 0vw, 0);
      -webkit-transform: translate3d(0vw, 0vw, 0);
      -moz-transform: translate3d(0vw, 0vw, 0);
      -o-transform: translate3d(0vw, 0vw, 0);
      -ms-transform: translate3d(0vw, 0vw, 0);
      backface-visibility: hidden;
    }
  
    100% {
      transform: translate3d(-58%, 0vw, 0);
      -webkit-transform: translate3d(-58%, 0vw, 0);
      -moz-transform: translate3d(-58%, 0vw, 0);
      -o-transform: translate3d(-58%, 0vw, 0);
      -ms-transform: translate3d(-58%, 0vw, 0);
      backface-visibility: hidden;
    }
  }
  
  @keyframes scrP10 {
    0% {
      opacity: 0;
      transform: translate3d(0vw, 0vw, 0);
      -webkit-transform: translate3d(0vw, 0vw, 0);
      -moz-transform: translate3d(0vw, 0vw, 0);
      -o-transform: translate3d(0vw, 0vw, 0);
      -ms-transform: translate3d(0vw, 0vw, 0);
      backface-visibility: hidden;
    }
  
    15% {
      opacity: 1;
      transform: translate3d(0vw, 0vw, 0);
      -webkit-transform: translate3d(0vw, 0vw, 0);
      -moz-transform: translate3d(0vw, 0vw, 0);
      -o-transform: translate3d(0vw, 0vw, 0);
      -ms-transform: translate3d(0vw, 0vw, 0);
      backface-visibility: hidden;
    }
  
    25% {
      transform: translate3d(0px, 2.02rem, 0px);
      -webkit-transform: translate3d(0px, 2.02rem, 0px);
      -moz-transform: translate3d(0px, 2.02rem, 0px);
      -o-transform: translate3d(0px, 2.02rem, 0px);
      -ms-transform: translate3d(0px, 2.02rem, 0px);
      backface-visibility: hidden;
    }
  
    35% {
      transform: translate3d(0px, 2.02rem, 0px);
      -webkit-transform: translate3d(0px, 2.02rem, 0px);
      -moz-transform: translate3d(0px, 2.02rem, 0px);
      -o-transform: translate3d(0px, 2.02rem, 0px);
      -ms-transform: translate3d(0px, 2.02rem, 0px);
      backface-visibility: hidden;
    }
  
    50% {
      transform: translate3d(0.4rem, 4.04rem, 0px);
      -webkit-transform: translate3d(0.4rem, 4.04rem, 0px);
      -moz-transform: translate3d(0.4rem, 4.04rem, 0px);
      -o-transform: translate3d(0.4rem, 4.04rem, 0px);
      -ms-transform: translate3d(0.4rem, 4.04rem, 0px);
      backface-visibility: hidden;
    }
  
    100% {
      transform: translate3d(0.4rem, 4.04rem, 0px);
      -webkit-transform: translate3d(0.4rem, 4.04rem, 0px);
      -moz-transform: translate3d(0.4rem, 4.04rem, 0px);
      -o-transform: translate3d(0.4rem, 4.04rem, 0px);
      -ms-transform: translate3d(0.4rem, 4.04rem, 0px);
      backface-visibility: hidden;
    }
  }
  
  @keyframes scrP11 {
    0% {
      transform: translate3d(-20px, 0vw, 0);
      -webkit-transform: translate3d(-20px, 0vw, 0);
      -moz-transform: translate3d(-20px, 0vw, 0);
      -o-transform: translate3d(-20px, 0vw, 0);
      -ms-transform: translate3d(-20px, 0vw, 0);
      backface-visibility: hidden;
      opacity: 0;
    }
  
    15% {
      transform: translate3d(0vw, 0vw, 0);
      -webkit-transform: translate3d(0vw, 0vw, 0);
      -moz-transform: translate3d(0vw, 0vw, 0);
      -o-transform: translate3d(0vw, 0vw, 0);
      -ms-transform: translate3d(0vw, 0vw, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  
    100% {
      transform: translate3d(0, 0vw, 0);
      -webkit-transform: translate3d(0, 0vw, 0);
      -moz-transform: translate3d(0, 0vw, 0);
      -o-transform: translate3d(0, 0vw, 0);
      -ms-transform: translate3d(0, 0vw, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  }
  
  @keyframes scrP12 {
    0% {
      transform: translate3d(-20px, 0vw, 0);
      -webkit-transform: translate3d(-20px, 0vw, 0);
      -moz-transform: translate3d(-20px, 0vw, 0);
      -o-transform: translate3d(-20px, 0vw, 0);
      -ms-transform: translate3d(-20px, 0vw, 0);
      backface-visibility: hidden;
      opacity: 0;
    }
  
    25% {
      transform: translate3d(0vw, 0vw, 0);
      -webkit-transform: translate3d(0vw, 0vw, 0);
      -moz-transform: translate3d(0vw, 0vw, 0);
      -o-transform: translate3d(0vw, 0vw, 0);
      -ms-transform: translate3d(0vw, 0vw, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  
    100% {
      transform: translate3d(0, 0vw, 0);
      -webkit-transform: translate3d(0, 0vw, 0);
      -moz-transform: translate3d(0, 0vw, 0);
      -o-transform: translate3d(0, 0vw, 0);
      -ms-transform: translate3d(0, 0vw, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  }
  
  @keyframes scrP13 {
    0% {
      transform: translate3d(-20px, 0vw, 0);
      -webkit-transform: translate3d(-20px, 0vw, 0);
      -moz-transform: translate3d(-20px, 0vw, 0);
      -o-transform: translate3d(-20px, 0vw, 0);
      -ms-transform: translate3d(-20px, 0vw, 0);
      backface-visibility: hidden;
      opacity: 0;
    }
  
    40% {
      transform: translate3d(0vw, 0vw, 0);
      -webkit-transform: translate3d(0vw, 0vw, 0);
      -moz-transform: translate3d(0vw, 0vw, 0);
      -o-transform: translate3d(0vw, 0vw, 0);
      -ms-transform: translate3d(0vw, 0vw, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  
    100% {
      transform: translate3d(0, 0vw, 0);
      -webkit-transform: translate3d(0, 0vw, 0);
      -moz-transform: translate3d(0, 0vw, 0);
      -o-transform: translate3d(0, 0vw, 0);
      -ms-transform: translate3d(0, 0vw, 0);
      backface-visibility: hidden;
      opacity: 1;
    }
  }
  
  @keyframes scrP14 {
    0% {
      transform: translate3d(0vw, 0%, 0);
      -webkit-transform: translate3d(0vw, 0%, 0);
      -moz-transform: translate3d(0vw, 0%, 0);
      -o-transform: translate3d(0vw, 0%, 0);
      -ms-transform: translate3d(0vw, 0%, 0);
      backface-visibility: hidden;
    }
  
    100% {
      transform: translate3d(0, 90%, 0);
      -webkit-transform: translate3d(0, 90%, 0);
      -moz-transform: translate3d(0, 90%, 0);
      -o-transform: translate3d(0, 90%, 0);
      -ms-transform: translate3d(0, 90%, 0);
      backface-visibility: hidden;
    }
  }
  
  @keyframes loadFn {
    0% {
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      backface-visibility: hidden;
    }
  
    100% {
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      backface-visibility: hidden;
    }
  }
  
  .warp-header4 {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9;
  }
  
  
  
  
  .disable-hover {
    pointer-events: none;
  }
  
  .scroll-animate.animated {
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
  }
  
  .font-fadeIn font {
    display: inline-block;
  }
  
  .scrolly {
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    backface-visibility: hidden;
  }
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  /*入场动画样式*/
.cssanimations .anim_emt,
.cssanimations .anim_group .anim_item {
  visibility: hidden;
}

.cssanimations .anim_emt.visb,
.cssanimations .anim_group .anim_item.visb {
  visibility: inherit;
}

.anim_emt.start {
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.anim_emt.start.scale_up {
  -webkit-animation-name: mk_scale;
  animation-name: mk_scale;
}

.anim_emt.start.fade_in {
  -webkit-animation-name: mk_fade;
  animation-name: mk_fade;
}

.anim_emt.start.r_to_l {
  -webkit-animation-name: mk_right_to_left;
  animation-name: mk_right_to_left;
}

.anim_emt.start.l_to_r {
  -webkit-animation-name: mk_left_to_right;
  animation-name: mk_left_to_right;
}

.anim_emt.start.t_to_b {
  -webkit-animation-name: mk_top_to_bottom;
  animation-name: mk_top_to_bottom;
}

.anim_emt.start.b_to_t {
  -webkit-animation-name: mk_bottom_to_top;
  animation-name: mk_bottom_to_top;
}

.slide_anim {
  visibility: hidden;
}

.slide_anim.start {
  visibility: visible;
}

.slide_anim.b_to_t.start {
  -webkit-animation: mk_bottom_to_top .6s;
  animation: mk_bottom_to_top 0.6s;
}

.anim_emt.palx_img.start {
  overflow: hidden;
  -webkit-animation-name: tt_palx_wrap;
  animation-name: tt_palx_wrap;
}

.anim_emt.palx_img.start .img-wrap {
  -webkit-animation: tt_palx_img .6s;
  animation: tt_palx_img 0.6s;
}

@keyframes tt_palx_wrap {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes tt_palx_img {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes loader {
  to {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes loader_dash {
  from {
    stroke-dasharray: 0 150;
    stroke-dashoffset: 0;
  }

  to {
    stroke-dasharray: 100 150;
    stroke-dashoffset: -140;
  }
}

@keyframes line_w100 {
  to {
    left: 100%;
  }
}

@keyframes rotate_360 {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fade_out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade_in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade_out_in {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes mk_scale {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes mk_fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mk_left_to_right {
  0% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes mk_right_to_left {
  0% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes mk_bottom_to_top {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mk_top_to_bottom {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mk_spt {
  0% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.js-m {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
}

.js-m.animate {
  opacity: 1;
  transform: translate(0, 0);
}

.js-m-2-1 {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
}

.js-m-2-1.animate {
  opacity: 1;
  transform: translate(0, 0);
}

.a-del1 {
  animation-delay: 0.1s;
}

.a-del2 {
  animation-delay: 0.2s;
}

.a-del3 {
  animation-delay: 0.3s;
}

.a-del4 {
  animation-delay: 0.4s;
}

.a-del5 {
  animation-delay: 0.5s;
}

.a-del6 {
  animation-delay: 0.6s;
}

.a-del7 {
  animation-delay: 0.7s;
}

.a-del8 {
  animation-delay: 0.8s;
}

.a-del9 {
  animation-delay: 0.9s;
}

.a-del10 {
  animation-delay: 1s;
}

.a-dur1 {
  animation-duration: 0.3s;
}

.a-dur2 {
  animation-duration: 0.4s;
}

.a-dur3 {
  animation-duration: 0.5s;
}

.a-dur4 {
  animation-duration: 0.6s;
}

.a-dur5 {
  animation-duration: 0.7s;
}

.a-dur6 {
  animation-duration: 0.8s;
}

.a-dur7 {
  animation-duration: 0.9s;
}

.a-dur8 {
  animation-duration: 1s;
}

.a-dur9 {
  animation-duration: 1.1s;
}

.a-dur10 {
  animation-duration: 1.2s;
}

.a-dur11 {
  animation-duration: 1.3s;
}

.a-dur12 {
  animation-duration: 1.4s;
}

.a-dur13 {
  animation-duration: 1.5s;
}

.a-dur14 {
  animation-duration: 1.6s;
}

.a-dur15 {
  animation-duration: 1.7s;
}

.a-dur16 {
  animation-duration: 1.8s;
}

.a-dur17 {
  animation-duration: 1.9s;
}

.a-dur18 {
  animation-duration: 2s;
}

.t-del1 {
  transition-delay: 0.1s;
}

.t-del2 {
  transition-delay: 0.2s;
}

.t-del3 {
  transition-delay: 0.3s;
}

.t-del4 {
  transition-delay: 0.4s;
}

.t-del5 {
  transition-delay: 0.5s;
}

.t-del6 {
  transition-delay: 0.6s;
}

.t-del7 {
  transition-delay: 0.7s;
}

.t-del8 {
  transition-delay: 0.8s;
}

.t-del9 {
  transition-delay: 0.9s;
}

.t-del10 {
  transition-delay: 1s;
}


@keyframes fadeInUpabout {
  from {
    opacity: 0;
    transform: translate3d(0%, 80px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1024px) {
  @keyframes fadeInUpabout {
    from {
      opacity: 0;
      transform: translate3d(0%, 30px, 0);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

.fadeInUpabout {
  animation-name: fadeInUpabout;
}